<template>
	<view class="pageWrapper" :style="{ '--color': color }">
		<status-bar title="确定订单"></status-bar>

		<Toggles
			:pageData="pageData"
			:delivery="delivery"
			:goods_id="goods_id"
			:car_id="car_id"
			@Use_tabWay="Use_tabWay"
			@Usesite="Address = $event"
			@buy_name="uname = $event"
			@buy_phone="utel = $event"
		></Toggles>

		<Product :pageData="pageData" :arg="requestData" :goods_id="goods_id" :car_id="car_id" @changeData="changeData" @getPageData="getPageData"></Product>

		<Group :open_group="open_group" :group_id="group_id" :pageData="pageData"></Group>

		<loading-view :loading="!pageData" marginTop="30" rows="4" Width="710rpx">
			<view class="wrapper">
				<view class="wrapper_view">
					<view class="AllBox">
						<view class="row j-sb a-center">
							<view class="d-flex a-center">
								<text class="color_33 size32">商品总价</text>
								<text class="color_99 size28 m-left10">共{{ pageData.allGoodsNumber }}件商品</text>
							</view>
							<view class="d-flex">
								<view class="Pricesymbol">￥</view>
								<text class="Price">{{ allGoodsMoney }}</text>
							</view>
						</view>
						<text class="color_99 h6" v-if="pageData.allowBuyTitle">{{ pageData.allowBuyTitle }}</text>
					</view>

					<view class="freight">
						<view class="row j-sb a-center">
							<text class="color_33 size32">配送费</text>
							<view class="d-flex" v-if="Number(pageData.express) > 0">
								<view class="Pricesymbol">￥</view>
								<text class="Price">{{ freight }}</text>
							</view>
							<text class="color_33 size32" v-else>{{ distribution }}</text>
						</view>
						<text class="color_99 h6" v-if="pageData.freeExpressTitle">{{ pageData.freeExpressTitle }}</text>
					</view>
					<view class="freight" v-if="pageData.all_packing && pageData.all_packing > 0">
						<view class="row j-sb a-center">
							<text class="color_33 size32">打包费</text>
							<view class="d-flex">
								<view class="Pricesymbol">￥</view>
								<text class="Price">{{ pageData.all_packing }}</text>
							</view>
						</view>
					</view>

					<Activity :Sale="Sale"></Activity>

					<Member :Sale="Sale"></Member>

					<Coupon :Sale="Sale" @Use_couponId="Use_couponId" :pageData="requestData"></Coupon>

					<Points :Sale="Sale" :pageData="requestData" @Use_points="Use_points"></Points>
				</view>

				<view class="byJob">
					<text class="color_33 size34 m-right10">合计：</text>
					<view class="d-flex">
						<view class="Pricesymbol">￥</view>
						<text class="Price">{{ paymentMoney == 0 ? '0.00' : parseFloat(paymentMoney).toFixed(2) }}</text>
					</view>
				</view>
			</view>
		</loading-view>

		<loading-view :loading="!pageData" marginTop="30" rows="1" :rowsWidth="['100%']" Width="710rpx" rowsHeight="50">
			<view class="Message">
				<view class="leaveword">
					<text class="color_33 size32">买家留言</text>
					<input type="text" class="leavInput" v-model="remark" placeholder-class="placeClass" placeholder="留言建议提前协商(200字以内)" />
				</view>
			</view>
		</loading-view>

		<!-- 平台通告信息 -->
		<view class="annunciate" v-if="pageData.tipsText">
			<u-parse :content="pageData.tipsText" :domain="imgUrl"></u-parse>
		</view>

		<view class="footer" v-if="pageData">
			<view class="footerBox">
				<view class="Copewith">
					<text class="color_33 size34">应付：</text>
					<view class="d-flex">
						<view class="withsymbol">￥</view>
						<text class="withPrice">
							{{ paymentMoney == 0 ? '0.00' : parseFloat(paymentMoney).toFixed(2) }}
						</text>
					</view>
				</view>
				<view class="subMit" :class="isContinue ? 'bgcolor' : 'bgCC'" @click="Continue">提交订单</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import Toggles from './components/Toggles.vue';
import Product from './components/Product.vue';
import Group from './components/Group.vue';
import Address from './components/Address.vue';
import Coupon from './components/Coupon.vue';
import Points from './components/Points.vue';
import Activity from './components/Activity.vue';
import Member from './components/Member.vue';
import LoadingView from './components/LoadingView.vue';
import Api from '@/common/Api.js';
export default {
	components: {
		Toggles,
		Product,
		Group,
		Address,
		Coupon,
		Points,
		Activity,
		Member,
		LoadingView
	},
	data() {
		return {
			imgUrl: this.imgUrl,
			goods_id: '',
			goods_num: '',
			car_id: '', // 购物车购买
			group_id: '', //参团购买
			open_group: '', // 开团购买 1为开团
			record_id: '', // 砍价
			specs: '', // 规格
			Address: '',
			paymentMoney: '', // 实付款
			delivery: 0,
			pageData: '',
			uname: '',
			utel: '',
			remark: '', // 留言备注

			couponsId: '',
			Sale: '',
			useIntegral: 0 // 是否使用积分 0不使用 1使用
		};
	},
	onLoad(opt) {
		if (opt.goods_id) this.goods_id = opt.goods_id;
		if (opt.goods_num) this.goods_num = opt.goods_num;
		if (opt.car_id) this.car_id = opt.car_id;
		if (opt.open_group) this.open_group = opt.open_group;
		if (opt.group_id) this.group_id = opt.group_id;
		if (opt.record_id) this.record_id = opt.record_id;
		if (opt.delivery) this.delivery = opt.delivery;
		if (opt.specs_bind_id) {
			this.specs = {
				specs_bind_id: opt.specs_bind_id,
				specs_bind_text: opt.specs_bind_text
			};
		}
	},
	onShow() {
		this.getPageData();
	},
	methods: {
		...mapMutations(['updateOrderstatus']),
		getPageData() {
			let url = '/zzj_singleSaleApi/getPurchase';
			if (this.record_id) url = '/BargainApi/getPurchase';
			let shop_id = uni.getStorageSync('shop_id') || '';
			this.$http
				.get({
					url,
					data: {
						goods_id: this.goods_id,
						num: this.goods_num,
						specs_bind_id: this.specs.specs_bind_id ?? '',
						Aregion: this.Address.Aregion + this.Address.Aaddress,
						car_id: this.car_id,
						group_id: this.group_id,
						open_group: this.open_group,
						record_id: this.record_id,
						shop_id: this.car_id ? '' : shop_id,
						delivery: this.delivery
					}
				})
				.then((res) => {
					if (res.code != 100) return this.$Toast(res.msg);
					const result = res;
					this.paymentMoney = result.totalMoney;
					this.pageData = result;
					if (this.group_id || this.open_group) return;
					result.allowBuy == 0 ? this.updateOrderstatus(false) : this.updateOrderstatus(true);

					this.getPreferential();
				});
		},

		Use_tabWay(event) {
			// if (this.delivery == event) return
			this.delivery = event;
			this.getPageData();
		},
		async getPreferential() {
			const paramData = await Api.getPreferential(this.requestData);
			this.Sale = paramData;
			this.paymentMoney = paramData.payMoney;
		},
		Use_couponId(event) {
			this.couponsId = event;
			this.getPreferential();
		},
		Use_points() {
			this.useIntegral = this.useIntegral == 1 ? 0 : 1;
			this.getPreferential();
		},

		Continue() {
			if (!this.isContinue) return;
			if (this.pageData.allowBuy == 0) return this.$Toast(this.pageData.allowBuyTitle);
			if (this.delivery == 1) {
				if (!this.Address.Aaddress) return this.$Toast('请选择收货地址');
				this.uname = this.Address.Aname;
				this.utel = this.Address.Amobile;
			}
			if (this.delivery == 2) {
				if (!this.uname) return this.$Toast('请输入姓名');
				if (!this.utel) return this.$Toast('请输入电话');
				if (!this.$reg.phone.test(this.utel)) return this.$Toast('输入电话号码有误');
			}
			this.$Modal('是否确定支付', '支付成功后可在我的订单中查看').then((config) => {
				if (config) this.InitiatePayment();
			});
		},
		InitiatePayment() {
			let url;
			let paramData = {
				delivery: this.delivery,
				receivingAddress: this.Address.Aregion + this.Address.Aaddress,
				uname: this.uname,
				utel: this.utel,
				express: this.pageData.express,
				totalMoney: this.paymentMoney,
				remarks: this.remark,
				couponID: this.couponsId,
				useIntegral: this.useIntegral,
				share_v_id: this.share_v_id,
				group_id: this.group_id,
				shop_id: uni.getStorageSync('shop_id') || '',
				aes_coupon: this.Sale.aes_coupon ? this.Sale.aes_coupon : ''
			};
			if (this.goods_id) {
				// 普通下单
				url = '/zzj_singleSaleApi/generateOrder';
				paramData['goods_id'] = this.goods_id;
				paramData['num'] = this.goods_num;
				paramData['single'] = 1;
				paramData['specs_bind_id'] = this.specs.specs_bind_id ?? '';
				paramData['specs_bind_text'] = this.specs.specs_bind_text ?? '';
			}
			if (this.car_id) {
				// 购物车下单
				url = '/zzj_singleSaleApi/storePayCart';
				paramData['couponsId'] = this.couponsId;
				paramData['car_id'] = this.car_id;
			}
			if (this.record_id) {
				// 砍价下单
				url = '/BargainApi/generateOrder';
				paramData['record_id'] = this.record_id;
			}
			if (this.open_group == 1 || this.group_id) {
				// 开团购买
				paramData['single'] = 0;
			}

			this.$showLoading('');
			this.$http
				.post({
					url,
					data: paramData
				})
				.then((res) => {
					this.$hideLoading();
					if (res.code != 100) return this.$Toast(res.msg);
					uni.setStorageSync('shop_id', this.ordersShop_id);

					// #ifdef H5
					window.location.href = 'https://sra.weikebaba.com/index.php/accountPay/weChatCashierPage?orderStr=' + res.payID;
					// #endif
					// #ifndef H5
					this.$rectTo('/moneyPage/capital/checkstand?payid=' + res.payID);
					// #endif
				});
		},

		changeData(event, num = 1) {
			if (event == 1) this.goods_num--;
			if (event == 2) this.goods_num++;
			if (event == 3) this.goods_num = num;
			this.getPageData();
		}
	},
	computed: {
		...mapState(['color', 'share_v_id', 'ordersShop_id', 'isContinue']),
		allGoodsMoney() {
			if (!this.pageData) return;
			return Number(this.pageData.allGoodsMoney).toFixed(2);
		},
		freight() {
			const express = Number(this.pageData.express);
			if (express > 0) return express.toFixed(2);
		},

		distribution() {
			if (this.delivery == 1) {
				return '快递 免运费';
			} else {
				return '免运费';
			}
		},

		requestData() {
			return {
				specs: this.specs,
				open_group: this.open_group,
				group_id: this.group_id,
				goods_id: this.goods_id,
				pageData: this.pageData,
				goods_num: this.goods_num,
				car_id: this.car_id,
				useIntegral: this.useIntegral,
				couponsId: this.couponsId,
				record_id: this.record_id
			};
		},
		isshowWay() {
			if (!this.pageData) return;
			const isFlag = this.pageData.deliverys.includes(',');
			return isFlag;
		}
	}
};
</script>
<style>
page {
	background-color: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.pageWrapper {
	// #ifdef H5
	padding-bottom: 160rpx;
	// #endif
	// #ifdef MP-WEIXIN
	padding-bottom: 250rpx;
	// #endif
}

.wrapper {
	width: 710rpx;
	background-color: #ffffff;
	padding: 10rpx 24rpx 24rpx 24rpx;
	margin: 30rpx auto 0;
	border-radius: 10rpx;

	.wrapper_view {
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.3);
		padding-bottom: 20rpx;
	}

	.AllBox {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx 0;
	}

	.freight {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx 0;
	}

	.coupon {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		align-items: center;

		.couponBox {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.byJob {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 30rpx;

		.allNum {
			color: #333;
			font-size: 26rpx;
		}
	}
}

.Pricesymbol {
	color: var(--color);
	font-size: 26rpx;
	margin-top: 10rpx;
}

.Price {
	color: var(--color);
	font-size: 36rpx;
}

.Message {
	width: 710rpx;
	background-color: #ffffff;
	padding: 10rpx 24rpx;
	margin: 20rpx auto 0;
	border-radius: 10rpx;

	.leaveword {
		width: 100%;
		display: flex;
		align-items: center;

		.leavInput {
			flex: 1;
			padding-left: 20rpx;
			height: 90rpx;
			text-align: right;
			font-size: 28rpx;
			color: #333;
		}

		.placeClass {
			color: #ccc;
			font-size: 28rpx;
		}
	}
}

.annunciate {
	width: 710rpx;
	background-color: #ffffff;
	padding: 24rpx;
	margin: 20rpx auto 0;
	border-radius: 10rpx;
}

.footer {
	width: 100%;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	border-top: 1px solid #f8f8f8;

	.footerBox {
		width: 100%;
		height: 120rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.Copewith {
			display: flex;
			align-items: center;

			.withsymbol {
				color: var(--color);
				font-size: 26rpx;
				margin-top: 24rpx;
			}

			.withPrice {
				color: var(--color);
				font-size: 52rpx;
			}
		}

		.subMit {
			width: 220rpx;
			height: 80rpx;

			color: #ffffff;
			font-size: 32rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

/deep/ .u-number-box {
	&__input {
		font-size: 36rpx !important;
	}
}
</style>
